<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
    <style>
        body{
            font: 18px "Microsoft YaHei UI";
            margin: 0;
            background-color: #f1f1f1;
        }
        header a{
            text-decoration: none;
            color: #FFFFFF;
            text-decoration: none;
        }
        header a:hover{
            color: #0aa1ed;
        }
        /*去掉自带的内边距*/
        .el-table .el-table__cell{
            padding: 0;
            color: #FF6537;
            font: 20px "Microsoft YaHei UI";
        }
        .p_img:hover{
            position: relative;
            bottom: 5px;
            /*元素的阴影:x偏移值 y偏移值 浓度 范围 颜色*/
            box-shadow: 0 0 10px 5px #333;
        }
        div li a{
            color: #FFFFFF;
            font: 16px "Microsoft YaHei UI";
            text-decoration: none;
        }
        div li a:hover{
            color: #0aa1ed;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="padding: 0;height: 40px;background-color:#FF6537">
            <div style="width: 1200px;margin: 0 auto">
                <el-row>
                    <el-col :span="18" style="padding-top: 10px">
                        <i class="el-icon-s-home" style="color: #FFFFFF"></i>
                        <a href="">商城首页</a>
                        <a href="">宠物攻略</a>
                        <a href="">宠物交流中心</a>
                    </el-col>
                    <el-col :span="6" style="padding-top: 10px">
                        <a href="">登录</a>
                        <a href="">注册</a>
                        <i class="el-icon-shopping-cart-1" style="color: #FFFFFF"></i>
                        <a href="">购物车</a>
                        <i class="el-icon-user" style="color: #FFFFFF"></i>
                        <a href="">个人中心</a>
                    </el-col>
                </el-row>
            </div>
        </el-header>
        <div style="display: flex;justify-content: center; background-color: #FFFFFF;">
            <div style="float: left">
                <img src="imgs/logo1.jpg"
                     style="width: 150px;vertical-align: middle" alt="">
                <!--搜索框开始-->
                <el-input style="width: 580px;border: 1px solid #FF6537;" v-model="input" placeholder="请输入内容"></el-input>
                <el-button type="搜索" round style="background-color: #FF6537;color: #FFFFFF">搜索</el-button>
                <!--搜索框结束-->
            </div>
        </div>
        <!--蓝色导航条开始-->
        <div style="width:100%;height:60px;background-color:#FF6537;margin: 0 auto">
            <el-menu style="width: 1600px;margin: 0 auto"
                     default-active="1"
                     class="el-menu-demo"
                     mode="horizontal"
                     @select="handleSelect"
                     background-color="#FF6537"
                     text-color="#000000"
                     active-text-color="#fff">
                <el-menu-item index="1"><a href="result.html">生活服务</a></el-menu-item>
                <el-menu-item index="2"><a href="result.html">狗狗</a></el-menu-item>
                <el-menu-item index="3"><a href="result.html">猫猫</a></el-menu-item>
                <el-menu-item index="4"><a href="result.html">宠物器材</a></el-menu-item>
                <el-menu-item index="5"><a href="result.html">商品特价</a></el-menu-item>
            </el-menu>
        </div>
        <!--蓝色导航条结束-->
        <el-main style="width: 1200px;margin: 0 auto">

            <!--商品列表开始-->
            <el-row :gutter="20">
                <el-col :span="6" v-for="p in productArr">
                    <el-card>
                        <div>
                            <a :href="'/detail.html?id='+p.id">
                                <img class="p_img" :src="p.url" width="230" height="230" alt="">
                            </a>
                        </div>
                        <div>
                            <a style="color: #3f3f3f;text-decoration: none"
                               :href="'/detail.html?id='+p.id">
                                <p style="font-size: 15px;margin-top: 0;height: 38px">{{p.title}}</p>
                            </a>
                            <div style="color: #6c6c6c">
                                <span>￥{{p.price}}</span>
                                <span style="font-size: 12px;
                                text-decoration: line-through">{{p.oldPrice}}</span>
                                <span style="float: right">销量:{{p.saleCount}}件</span>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <!--商品列表结束-->
        </el-main>
        <el-footer style="padding: 0">
            <div style="background-image: url('imgs/wave.png');
                    height: 95px;margin-bottom: -30px"></div>
            <div style="background-color: #3f3f3f;height: 100px;
                    font-size: 14px;color: #b1b1b1;
                    text-align: center;padding: 30px">
                <p>Copyright © 福州达内中心所有 请勿盗版 盗版必究<</p>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script src="js/axios.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                categoryArr:[],
                bannerArr:[],
                topArr:[],
                productArr:[],
                currentIndex:"",
                wd:""
            }
        },
        created:function () {
            //发请求获取所有分类信息
            axios.get("/category/select").then(function (response) {
                v.categoryArr = response.data;
            })
            //判断地址栏中包含的是wd还是cid
            if (location.search.indexOf("cid")!=-1){//包含cid
                                                    //发出请求获取当前分类下的所有的商品信息
                //得到地址栏中的分类id
                let cid = location.search.split("=")[1];
                //在created方法中v变量还没有创建完 不能访问v变量 此时通过this代替v
                //没创建完指在实例化的过程中调用的created方法,实例化完之后才允许访问v变量
                //this代表当前正在实例化的Vue对象 通过this也可以访问到Vue里面的变量
                this.currentIndex = cid;
                //通过分类id发出查询请求
                axios.get("/product/select/category?cid="+cid).then(function (response) {
                    //此处是子线程请求完数据回调回来的位置
                    //此时Vue对象早已实例化完成
                    //此时的this代表的已不是Vue对象而是window对象
                    v.productArr = response.data;
                })
            }else{//包含wd搜索关键字
                //得到搜索的关键字wd
                let wd = location.search.split("=")[1];
                axios.get("/search?wd="+wd).then(function (response) {
                    v.productArr = response.data;
                })
            }
        },
        methods:{
            handleSelect(index){
                console.log(index);
                //查询点击分类下的商品信息
                axios.get("/product/select/category?cid="+index).then(function (response) {
                    v.productArr = response.data;
                })
            },
            search(){
                axios.get("/search?wd="+v.wd).then(function (response) {
                    v.productArr = response.data;
                })
            }
        }
    })
</script>
</html>